<template>
  <view class="detail-container">
    <!-- 1. 新闻标题（带来源图标） -->
    <view class="news-title-bar">
      <image class="source-icon" src="/static/source-icon.png"></image>
      <text class="news-title">习近平主席贺信为全球能源市场注入更多确定性</text>
    </view>

    <!-- 2. 作者相关信息 + 举报按钮 -->
    <view class="author-info">
      <image class="author-avatar" src="/static/avatar.png"></image>
      <view class="author-text">
        <text class="author-name">新华社</text>
        <text class="publish-time">2025-11-25 23:24</text>
      </view>
      <!-- 举报按钮 -->
      <button class="report-btn" @click="showReportToast">举报</button>
      <!-- 关注按钮 -->
      <button class="follow-btn">+关注</button>
    </view>

    <!-- 3. 新闻导语 -->
    <view class="news-lead">
      <text>新华社北京11月25日电 题：构建全方位合作新格局 擘画能源治理新图景——习近平主席贺信为全球能源市场注入更多确定性</text>
      <text>新华社记者温馨、王悦阳</text>
    </view>

    <!-- 4. 新闻内容 -->
    <view class="news-content">
      <text class="content-text">
        11月25日，国家主席习近平向第七届中俄能源商务论坛致贺信，引发两国各界人士热烈反响。大家表示，习近平主席的贺信高度评价中俄能源合作对于促进两国经济社会发展、增进两国人民福祉发挥的积极作用，为两国企业持续推动务实合作提供了重要指引，为两国构建全方位立体能源合作新格局指明了方向，为全球能源市场注入更多确定性。各方将深入落实贺信精神，持续巩固中俄全面能源合作伙伴关系，不断造福两国和世界人民。
        \n\n中俄能源商务论坛由两国元首发起成立，并一直得到两国元首的高度关注和亲自指导。同日，俄罗斯总统普京也向论坛致贺信。
        \n\n“衷心感谢两国元首支持我们的论坛，也感谢他们一直以来亲自关注双边能源合作发展当中的问题。”俄罗斯总统能源发展战略和生态安全委员会秘书长、俄罗斯石油公司总裁谢钦说，习近平主席曾强调，“能源的饭碗必须端在自己手里”。中国已建成全球最大、发展最快的可再生能源体系，拥有全球最完整的新能源产业链，更是全球能耗强度降低最快的国家之一。俄中能源合作的深化不仅惠及两国，更能为动荡变革中的全球能源市场注入关键稳定性与确定性，为维护世界能源安全、促进全球能源治理体系完善发挥不可替代的重要作用。
        \n\n“两国元首的贺信让我们对双边能源合作的稳步深化充满信心。”俄罗斯副总理诺瓦克表示，正如习近平主席在贺信中指出，俄中能源合作起步早、基础好，是双方互利合作的典范。当前，两国已建立起全方位、多层次、常态化的联络机制，为能源合作中的各类议题沟通、项目推进提供了有力保障，也为双方在油气、核能、可再生能源等多领域的协同发展奠定了坚实基础。
        \n\n华北电力大学国家能源发展战略研究院执行院长王鹏表示，习近平主席贺信为维护全球能源产业链供应链稳定畅通指明方向。建立公平公正、均衡普惠的全球能源治理体系，中国是积极倡导者、扎实践行者。面对产业链供应链高度全球化的特征，中国辩证认识能源科技自立自强与国际合作关系，拓展和深化中外联合科学研究，强化能源全球技术合作，助力增强全球能源产业链供应链的韧性。
        \n\n“习近平主席强调‘为世界能源安全与绿色低碳转型注入更多稳定性’，坚定了电力行业坚持绿色发展的理念和决心。”现场聆听习近平主席的贺信，中国电力企业联合会常务副理事长杨昆备受鼓舞，“我国已与多个国家实现电力互联互通，为200余个国家和地区提供清洁能源产品和服务。过去一年，风电光伏产品出口助力全球减少碳排放约26.5亿吨。未来，我们将继续深度参与全球和地区能源治理，为全球能源转型贡献中国力量。”
        \n\n俄罗斯圣彼得堡交易所总裁阿尔捷米耶夫说，习近平主席在贺信中强调“推动建设更加公平公正、均衡普惠的全球能源治理体系”，这一重要论述为两国合作凝聚了共识。双方可携手搭建自主可控的交易与定价平台，形成更具公信力、更贴合全球能源市场实际的价格参考体系，既为俄中能源贸易筑牢安全稳定的坚实屏障，也为各国参与能源合作提供多元、包容的路径选择。
        \n\n国家能源局国际合作司司长魏晓威表示，习近平主席的贺信充分肯定了中俄能源合作取得的成绩，并为未来中俄能源合作提供了方向引领。“接下来，我们将深入落实习近平主席贺信精神，不断深化与包括俄罗斯在内的各重点国家能源务实合作，保障我国开放条件下的能源安全，推动建设更加公平公正、均衡普惠的全球能源治理体系。”
      </text>
    </view>

    <!-- 5. 精彩推荐 -->
    <view class="recommend-section">
      <text class="recommend-title">精彩推荐</text>
      <view class="recommend-list">
        <view class="recommend-item" v-for="(item, index) in recommendList" :key="index">
          <image class="recommend-img" :src="item.img"></image>
          <text class="recommend-text">{{ item.title }}</text>
        </view>
      </view>
    </view>

    <!-- 6. 评论区 -->
    <view class="comment-section">
      <!-- 评论数 + 点赞 -->
      <view class="comment-header">
        <text class="comment-count">评论 44</text>
        <button class="like-btn">
          <image src="/static/like-icon.png"></image>
          <text>点赞</text>
        </button>
      </view>

      <!-- 登录提示 -->
      <view class="login-tip" v-if="!isLogin">
        请先 <text class="login-link" @click="goToLogin">登录</text> 后发表评论～
      </view>

      <!-- 评论列表 -->
      <view class="comment-list">
        <view class="comment-item" v-for="(item, index) in commentList" :key="index">
          <image class="comment-avatar" src="/static/user-avatar.png"></image>
          <view class="comment-content">
            <view class="comment-header">
              <text class="comment-username">{{ item.username }}</text>
              <text class="comment-time">{{ item.time }}</text>
            </view>
            <text class="comment-text">{{ item.content }}</text>
            <view class="comment-op">
              <button class="like-op" @click.stop="likeComment(index)">
                赞 <span v-if="item.like > 0">{{ item.like }}</span>
              </button>
              <button class="reply-op">回复</button>
            </view>
          </view>
        </view>

        <!-- 查看更多评论 -->
        <view class="load-more-comment" @click="loadMoreComments">
          查看全部 44 条评论
        </view>
      </view>

      <!-- 添加评论 -->
      <view class="add-comment" :class="{disabled: !isLogin}">
        <input 
          type="text" 
          placeholder="我要评论" 
          v-model="newComment"
          :disabled="!isLogin"
        />
        <button @click="submitComment" :disabled="!isLogin">发布</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 登录状态（默认未登录）
      isLogin: false,
      // 精彩推荐列表
      recommendList: [
        { img: "/static/recommend1.png", title: "市节24分，5个三分！库里打疯了，半场狂轰25分" },
        { img: "/static/recommend2.png", title: "意甲第35轮进球的球员是什么，国米进攻优势是什么" }
      ],
      // 真实评论数据
      commentList: [
        {
          username: "好学海洋uuP",
          content: "加强中俄合作助力增强全球能源产业练供应链的韧性",
          time: "4分钟前",
          like: 0
        },
        {
          username: "书桌上的晨光",
          content: "不断深化与包括俄罗斯在内的各重点国家能源务实合作，保障我国开放条件下的能源安全，推动建设更加公平公正、均衡普惠的全球能源治理体系。",
          time: "6分钟前",
          like: 1
        },
        {
          username: "高级蜻蜓IK",
          content: "贺信高屋建瓴，为全球能源治理贡献中国智慧，以全方位合作新格局应对变局，为国际市场注入稳定预期与共赢动力。",
          time: "12分钟前",
          like: 1
        }
      ],
      // 新评论输入
      newComment: ""
    };
  },
  methods: {
    // 举报按钮提示
    showReportToast() {
      uni.showToast({
        title: "举报功能已提交",
        icon: "none",
        duration: 1500
      });
    },
    // 前往登录页
    goToLogin() {
      uni.navigateTo({
        url: "/pages/login/login.vue"
      });
    },
    // 点赞评论
    likeComment(index) {
      this.commentList[index].like++;
    },
    // 提交评论
    submitComment() {
      if (!this.isLogin) {
        this.goToLogin();
        return;
      }
      if (this.newComment.trim()) {
        this.commentList.unshift({
          username: "我",
          content: this.newComment,
          time: "刚刚",
          like: 0
        });
        this.newComment = "";
      }
    },
    // 加载更多评论
    loadMoreComments() {
      // 模拟加载更多评论（实际项目中调用接口）
      const moreComments = [
        {
          username: "网友123456",
          content: "中俄能源合作是双赢的选择，支持！",
          time: "30分钟前",
          like: 2
        },
        {
          username: "能源行业观察者",
          content: "全球能源治理需要中国这样的负责任大国参与",
          time: "1小时前",
          like: 3
        }
      ];
      this.commentList = [...this.commentList, ...moreComments];

      // 提示用户已加载
      uni.showToast({
        title: "已加载更多评论",
        icon: "none"
      });
    }
  }
};
</script>

<style scoped>
.detail-container {
  padding: 15rpx;
  background: #fff;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 1. 新闻标题栏 */
.news-title-bar {
  margin-bottom: 15rpx;
}
.source-icon {
  width: 40rpx;
  height: 40rpx;
  vertical-align: middle;
  margin-right: 10rpx;
}
.news-title {
  font-size: 34rpx;
  font-weight: bold;
  line-height: 1.5;
  color: #333;
  display: block;
}

/* 2. 作者信息 */
.author-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 15rpx;
  border-bottom: 1rpx solid #eee;
}
.author-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 15rpx;
}
.author-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
}
.publish-time {
  font-size: 24rpx;
  color: #999;
}
.report-btn {
  background: transparent;
  color: #999;
  font-size: 24rpx;
  padding: 0 10rpx;
  margin-right: 10rpx;
}
.follow-btn {
  margin-left: auto;
  background: #ff4d4f;
  color: #fff;
  border-radius: 20rpx;
  font-size: 24rpx;
  padding: 5rpx 15rpx;
}

/* 3. 新闻导语 */
.news-lead {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20rpx;
  padding-left: 10rpx;
  border-left: 4rpx solid #ff4d4f;
}

/* 4. 新闻内容 */
.news-content {
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
}
.content-text {
  font-size: 28rpx;
  line-height: 1.8;
  color: #333;
  white-space: pre-wrap;
  text-indent: 56rpx; /* 首行缩进2字符 */
}
.content-text::first-line {
  text-indent: 0;
}

/* 5. 精彩推荐 */
.recommend-section {
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
}
.recommend-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
}
.recommend-list {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}
.recommend-item {
  display: flex;
  align-items: center;
  gap: 15rpx;
}
.recommend-img {
  width: 120rpx;
  height: 80rpx;
  border-radius: 8rpx;
}
.recommend-text {
  font-size: 26rpx;
  flex: 1;
  line-height: 1.4;
}

/* 6. 评论区 */
.comment-section {
  margin-bottom: 20rpx;
}
.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}
.comment-count {
  font-size: 28rpx;
  font-weight: 500;
}
.like-btn {
  display: flex;
  align-items: center;
  gap: 5rpx;
  background: #f5f5f5;
  border-radius: 20rpx;
  padding: 5rpx 15rpx;
}
.like-btn image {
  width: 24rpx;
  height: 24rpx;
}
.login-tip {
  font-size: 26rpx;
  color: #999;
  text-align: center;
  padding: 20rpx 0;
  border: 1rpx dashed #eee;
  border-radius: 8rpx;
  margin-bottom: 15rpx;
}
.login-link {
  color: #ff4d4f;
  text-decoration: underline;
}
.comment-list {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
  margin-bottom: 20rpx;
}
.comment-item {
  display: flex;
  gap: 15rpx;
}
.comment-avatar {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
}
.comment-content {
  flex: 1;
}
.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5rpx;
}
.comment-username {
  font-size: 26rpx;
  font-weight: 500;
}
.comment-time {
  font-size: 22rpx;
  color: #999;
}
.comment-text {
  font-size: 26rpx;
  line-height: 1.4;
  margin-bottom: 5rpx;
}
.comment-op {
  display: flex;
  gap: 15rpx;
}
.comment-op button {
  font-size: 22rpx;
  color: #999;
  padding: 0;
}

/* 修复的样式 */
.load-more-comment {
  text-align: center;
  font-size: 24rpx;
  color: #007aff; /* 蓝色，通常表示可点击 */
  padding: 15rpx 0;
  letter-spacing: 2rpx;
}

.add-comment {
  display: flex;
  gap: 10rpx;
  align-items: center;
}
.add-comment input {
  flex: 1;
  border: 1rpx solid #eee;
  border-radius: 30rpx; /* 圆形输入框 */
  padding: 15rpx 20rpx;
  font-size: 26rpx;
}
.add-comment button {
  background: #ff4d4f;
  color: #fff;
  border-radius: 30rpx;
  padding: 0 25rpx;
  height: 60rpx;
  line-height: 60rpx;
}
/* 未登录时的禁用样式 */
.add-comment.disabled input {
  background-color: #f5f5f5;
  color: #999;
}
.add-comment.disabled button {
  background-color: #ccc;
}
</style>